<template>
  <div calss="leftContainer" style="height:100%;">
    <div class="leftContainer_title">
      <div class="iconClass" />
      <div class="titleClass">
        公共预算收入(前十)
      </div>
    </div>
    <div class="leftContainer_container">
      <dv-border-box-8 :reverse="true">
        <div style="height:100%;padding:5px">
          <VEcharts
            ref="echart1"
            autoresize
            :options="leftConfig"
            style="width:98%;height:100%"
          />

        </div>
      </dv-border-box-8>
    </div>
    <div class="leftContainer_title">
      <div class="iconClass" />
      <div class="titleClass">
        基金预算收入(前十)
      </div>
    </div>
    <div class="leftContainer_container">
      <dv-border-box-8 :reverse="true">
        <div style="height:100%;padding:5px">
          <VEcharts
            ref="echart2"
            autoresize
            :options="leftConfig2"
            style="width:100%;height:100%"
          />
        </div>
      </dv-border-box-8>
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import { commonMethod } from '@/api/mapper/index.js';
import _ from 'lodash';

const baseVConfig = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    data: ['年度预算', '累计执行'],
    textStyle: {
      fontSize: 12, // 字体大小
      color: '#ffffff'// 字体颜色
    }
  },
  grid: {
    left: '0%',
    top: '8%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    // type: 'log', // 坑死我了  仨小时白给
    splitLine: {
      show: false
    },
    'axisLine': { // x轴坐标轴
      'show': false
    },
    axisLabel: {
      show: false
    },
    axisTick: {		// x轴刻度线
      show: false
    },

    max: ({ max }) => max

  },
  yAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    },
    axisLabel: {
      margin: 8,
      formatter: function(params) {
        var val = '';
        if (params.length > 4) {
          val = params.substr(0, 4) + '...';
          return val;
        } else {
          return params;
        }
      }
    },

    axisTick: {		// x轴刻度线
      show: false
    }

  },
  series: [
    {
      name: '年度预算',
      type: 'bar',
      barWidth: '75%',
      stack: 'total',
      label: {
        show: true,
        position:'inside'
      },
      barGap: '-100%',
      emphasis: {
        focus: 'series'
      },

      data: [],
      itemStyle: {
        normal: {
          color: '#4f82e6'
        }
      }
    },
    {
      name: '累计执行',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position:[30,'30%'],
        color:'#fff'

      },
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        normal: {
          color: '#55f3ff'
        }
      },
      data: []
    }

  ]
};

export default {
  components: {
    VEcharts
  },
  data() {
    return {
      leftConfig: {
      },
      leftConfig2: {}
    };
  },
  mounted() {
    this.createConfig(564).then(config => {
      this.$refs.echart1.clear();
      this.leftConfig = config;
    });
    this.createConfig(565).then(config => {
      this.$refs.echart2.clear();
      this.leftConfig2 = config;
    });
    // setInterval(() => {
    //   // this.createConfig();
    //   console.log(this.data);
    // }, 10000);
  },
  methods: {
    async createConfig(tableId) {
      const nameList = [];
      const ndysList = [];
      const ljzxList = [];
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 10,
        pageType: 1,
        tableId
      }).then(res => {
        if (res.success) {
          res.data.map((item, index) => {
            if (index <= 10) {
              const yskm = item.YSKM;
              if (/\./g.test(yskm)) {
                nameList.push(yskm.split('.')[1]);
              } else {
                nameList.push(yskm);
              }
              ndysList.push(Number(item.NDYS.toFixed(2)));
              if(tableId===564){
                if(index===1||index===2||index===3){
                   ljzxList.push({value:Number(item.LJZH.toFixed(2)),label:{position:'right'}});
                }else if(index===0){
                  ljzxList.push({value:Number(item.LJZH.toFixed(2)),label:{position:'inside'}});
                }else{
                ljzxList.push(Number(item.LJZH.toFixed(2)));
              }
              }
              if(tableId===565){
                // if(index===1||index===2||index===3){
                //    ljzxList.push({value:Number(item.LJZH.toFixed(2)),label:{position:'right'}});
                // }else{
                ljzxList.push(Number(item.LJZH.toFixed(2)));
              // }
              }
            }
          });
        }
      });
      // this.$refs.echart1.clear();
      const newConfig = _.cloneDeep(baseVConfig);
      newConfig.yAxis.data = nameList.reverse();
      newConfig.series[0].data = ndysList.reverse();
      newConfig.series[1].data = ljzxList.reverse();
      return Promise.resolve(newConfig);
    }
  }
};
</script>

<style lang="scss" scoped>

  .leftContainer_title{
    display: flex
  }
  .iconClass{
    width: 5px;
    height: 18px;
    opacity: 1;
    background: #2597ff;
    border-radius: 1px;
  }
  .titleClass{
    flex:11;
    background: url('../../../assets/images/mapTest1/titleBg.png');
    background-size:100% 100%;
    margin-left: 5px;
    color: #fff;
    height: 18px;
    opacity: 1;
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 18px;
    padding-left: 5px;
  }
  .leftContainer_container{
    height: calc(50% - 28px);
    margin-top: 5px;
    margin-bottom: 5px
  }
</style>
